<template>
    <div id="main" class="p-relative" role="main">
        <div id="content" class="container" v-bind:class="{'isFold':!this.$store.state.Page.toggleSiderBar}">
            <header-tab :tabsName='tabname'></header-tab>
            <transition mode="out-in">
                <router-view></router-view>
            </transition>
        </div> 
    </div>
</template>

<style>
    #main {
        height: 100%;
    }

    .isFold {
        margin-left: 0 !important;
    }
</style>

<script>
    import HeaderTab from '../widgets/HeaderTab'

    export default {
        props: ['tabname', 'showSiderBar'],
        components: {
            HeaderTab
        }
    }
</script>
